/*
 *排行版页面文件
 */
'use strict';
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import {analysisJson, regionArray, endexData} from '@app/constants/DataSource.jsx';
import { Row, Col, Tabs, Button, Icon, Card, Avatar, Breadcrumb, Progress, List, Spin, Divider, Table } from 'antd';
import './Rankings.css';

class Rankings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading:true
    };
  }

  componentDidMount(){
    setTimeout(() => {
    this.setState({loading:false});
    },300);
  }
   
  render() { 
    const columns = [{
      title: '排名',
      dataIndex: 'key',
    }, {
      title: '编号',
      dataIndex: 'ranksId',
    }, {
      title: '地区',
      dataIndex: 'name',
    }, {
      title: '指数',
      dataIndex: 'fraction',
    }]; 
    const data = [...endexData];
    for(let i=6;i<22;i++){
      data.push({key:i,name:'暂无',fraction:0});
    }

    return (
      <div className = 'workbench'>
        <Row gutter = {16}>
          <Col span = {24}>
            <Card>
              <Breadcrumb>
                <Breadcrumb.Item><Link to='/Analysis'>首页</Link></Breadcrumb.Item>
                <Breadcrumb.Item>排行榜</Breadcrumb.Item>
              </Breadcrumb>
              <Row>
                <Col span = {24} style = {{paddingTop:30,textAlign:'center'}}>
                    <div className = 'statItem'>
                      <p>环境指数</p>
                      <p>{endexData[localStorage.getItem('userDepament')-1].fraction}</p>
                    </div>
                    <Divider type="vertical" />
                    
                    <div className = 'statItem'>
                      <p>队伍编号</p>
                      <p>ZHS-0{localStorage.getItem('userDepament')}</p>
                    </div>
                    <Divider type="vertical" />
                    <div className = 'statItem'>
                      <p>队伍排名</p>
                      <p>{endexData[localStorage.getItem('userDepament')-1].key}/{endexData.length}</p>
                    </div>
                  </Col>
                </Row>
              <Table dataSource={data} columns={columns} loading = {this.state.loading}/>
            </Card>
          </Col>
         </Row>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
   
  }
}
export default connect(
  mapStateToProps, {
    
  }
)(Rankings)
